<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		html,body{
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		#box{
			width:50px; height: 50px; background: blue;
			position: absolute; left: 0; top: 0;
			border-radius: 50%;
		}
	</style>
	<script type="text/javascript">
		
		//做直线运动
		onload = function(){
			var box = document.getElementById("box");
			var speedx = 5;
			var speedy = 3;
			
			setInterval(function(){
				box.style.left = box.offsetLeft + speedx + "px";
				box.style.top = box.offsetTop + speedy + "px";
				//右边界
				if(box.offsetLeft > (window.innerWidth-box.offsetWidth)){
					speedx *= -1;
				}
				//下边界
				if(box.offsetTop > (window.innerHeight-box.offsetHeight)){
					speedy *= -1;
				}
				//上边界
				if(box.offsetTop < 0) {
					speedy *= -1;
				}
				//左边界
				if(box.offsetLeft < 0){
					speedx *= -1;
				}
				
			},20);
			
		}
	</script>
	<body>
		<div id="box">
			
		</div>
	</body>
</html>
